// 解构 React Hooks 
import React, { useState } from "react";
// 一个函数返回一段jsx
const App =()=>{
  // JSX {} 占位符
  // let name='world';
  // state 状态
  // 当前组件添加一个状态 默认值
  // 数组的解构
  let [name,setName]=useState('世界');//给JSX带来状态
  let [date,setDate]=useState(new Date().toLocaleTimeString());//第一个参数默认值 第二各参数 函数
  let tag=0;
  const changeName=()=>{
    // console.log('ssss');
    if(tag==0){
      setName('world');
      tag++;
    }else{
        setName('世界');
        tag--;
    }
    console.log(tag);
  }
  setInterval(()=>{
    setDate(new Date().toLocaleTimeString());
  },1000); 
  const friends=[
    {
      name:'gg',
      age:20
    },
    {
      name:'zz',
      age:20
    }
  ];
  return (
    <div>
      {/* JSX 简单高效的UI模板 表达方式，状态+事件+....... */}
      <h1>hello {name}!</h1>
      <h2>显示现在 {date}</h2>
      <ul>
        {
          friends.map((friend,index) => <li key={index}>{friend.name}-{friend.age}</li>)
        }
      </ul>
      <button onClick={changeName}>切换中英文名</button>
    </div>
  )
}
export default App;